<template>
  <a-modal
    @cancel="close"
    :width="656"
    title="批量新增通知人"
    :visible="visible"
    :body-style="{ 'padding-bottom': '10px' }"
    unmount-on-close
  >
    <a-checkbox-group v-model="form.receiveTypeList" class="radio-group">
      <a-checkbox v-for="itemRadio in allStatus" :key="itemRadio.value" :value="itemRadio.value">
        {{ itemRadio.label }}
      </a-checkbox>
    </a-checkbox-group>
    <page-form :model="form" :rules="rules" class="page-form" div="true" layout="vertical" ref="formRef">
      <page-form-item style="margin-bottom: 0" field="staffIdList" required size="1">
        <fast-transfer
          style="width: 100%"
          :titles="['未选择', '已选择']"
          v-model="form.staffIdList"
          :data-source="informPersonAll"
          :selected-list="selectedList"
        />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="handleOkFn" :loading="loading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { getStaffData, addBatchStaff } from '@/api/business/orderSync.js'
  import { Notification } from '@arco-design/web-vue'

  const allStatus = ref([
    { id: 1, value: 1, label: 'APP推送', indeterminate: false },
    { id: 2, value: 2, label: '邮件通知', indeterminate: false },
  ])
  const emit = defineEmits(['getNoticePerson'])
  const visible = ref(false)
  const loading = ref(false)
  const selectedList = ref()
  const form = ref({
    receiveTypeList: [],
    staffIdList: [],
  })
  // 获取通知人未关联列表
  const getAllInfoList = async (param = {}) => {
    const res = await getStaffData(param)
    return res.result
  }
  const rules = ref({
    staffIdList: { required: true, message: '请选择接收通知人', trigger: 'change' },
  })

  const open = () => {
    visible.value = true
    // 清空弹窗
    form.value = {}
  }
  const close = () => {
    visible.value = false
  }
  const formRef = ref(null)
  const handleOkFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        form.value.receiveTypeList = form.value.receiveTypeList ? form.value.receiveTypeList : []
        addBatchStaff(form.value).then((res) => {
          Notification.success({
            content: '添加成功',
            closable: true,
            duration: 10000,
          })
          emit('getNoticePerson', form.value)
          close()
        })
      }
    })
  }

  // 全部通知人
  const informPersonAll = ref([])
  onMounted(async () => {
    // 获取通知人列表
    let allList = await getAllInfoList()
    // 全部通知人
    if (allList.length > 0) {
      informPersonAll.value = allList.map((item) => {
        return {
          label: item.namePhone,
          value: item.id,
        }
      })
    }
    selectedList.value = []
  })

  defineExpose({
    open,
  })
</script>
<style lang="less" scoped></style>
